import { useEffect, useState } from "react"
import IconFont from "../CustomIcon"
import "./index.css"
import { typeMap } from "@/utils"
import dayjs from "dayjs"
import { useNavigate } from "react-router-dom"
function BillItem({ bill }) {
  const [income, setIncome] = useState(0)
  const [expense, setExpense] = useState(0)
  const navigate = useNavigate()

  const goToDetail = (item) => {
    navigate(`/detail?id=${item.id}`)
  }

  useEffect(() => {
    const _income = bill.bills
      .filter((i) => i.pay_type === 2)
      .reduce((cur, item) => cur + Number(item.amount), 0)
    setIncome(_income)

    const _expense = bill.bills
      .filter((i) => i.pay_type === 1)
      .reduce((cur, item) => cur + Number(item.amount), 0)
    setExpense(_expense)
  }, [bill])
  return (
    <div className="item">
      <div className="headerDate">
        <div className="date">{bill.date}</div>
        <div className="money">
          <img src="//s.yezgea02.com/1615953405599/zhi%402x.png" alt="支" />
          <span className="span2">¥{expense.toFixed(2)}</span>
          <img src="//s.yezgea02.com/1615953405599/shou%402x.png" alt="收" />
          <span>¥{income.toFixed(2)}</span>
        </div>
      </div>
      {bill &&
        bill.bills.map((item) => (
          <div className="bill" key={item.id} onClick={() => goToDetail(item)}>
            <div className="oneLine">
              <div className="detail">
                <IconFont
                  className="itemIcon"
                  type={item.type_id ? typeMap[item.type_id].icon : 1}
                ></IconFont>
                <span>{item.type_name}</span>
              </div>
              <span
                style={{ color: item.pay_type == 2 ? "red" : "#39be77" }}
              >{`${item.pay_type == 1 ? "-" : "+"}${item.amount}`}</span>
            </div>
            <span>
              {dayjs(Number(item.date)).format("HH:mm")}{" "}
              {item.remark ? `| ${item.remark}` : ""}
            </span>
          </div>
        ))}
    </div>
  )
}

export default BillItem
